<template>
	<div>
	
		<body id="poster">
		
		<el-form :model="user" :rules="rules" class="login-container" ref="loginForm">
			<div class="login-title">
				<span>欢 &nbsp; 迎</span>
				
			</div>
			<div class="login-tit">
				<span>登 &nbsp; 录</span>
				<!-- <h3 class="login-title">登</h3>
				<h3 class="login-title">录</h3> -->
			</div>
			
			
			<el-form-item prop="username">
						<span class="span">账号 ：</span>
						
					 <el-input type="text" v-model="user.username" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<span class="span">密码 ：</span><el-input type="password" v-model="user.password"   placeholder="密码"></el-input>
			</el-form-item>
			<!-- <div style="display: flex; height: 20px; margin-bottom: 10px;">
				<img :src="imgUrl" /> <a style="margin-right: 110px;text-decoration: none;" href="#" @click="getCode()">看不清</a>
				<el-checkbox class="login-remember" v-model="remember">记住用户名</el-checkbox>
			</div> -->
			<!-- <el-form-item prop="checkCode">
				<el-input v-model="user.checkCode" placeholder="请输入验证码" style="width: 100px;"></el-input>
			</el-form-item> -->
			<div class="switch">
				<el-switch
				  v-model="value"
				  active-color="#13ce66"
				  inactive-color="#ff4949"
				   active-text="记住密码"
				   style="display: block"
				  
				  >
				</el-switch>
			</div>
			
			<el-form-item >
				<el-button  type="primary" style="width: 100%;background: #505458;border: none" @click="login()">登录</el-button>
			</el-form-item>
		</el-form>
		
		  </body>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				user:{
					username:''
				},
				rules:{
					username:[
						{required:true,message:'请输入用户名',trigger:['blur','change']},
						{pattern:/^[a-zA-Z0-9_\u4e00-\u9fa5\u3400-\u4DB5]{5,10}$/,message:'用户名长度在5-10个字符之间'}
					],
					password:[
						{required:true,message:'请输入密码',trigger:['blur','change']},
						
					]
				},
				value:false,
				
			}
		},
		methods:{
			login(){
				this.$refs["loginForm"].validate(valid=>{
					if(valid){
						let url="user/login"
						axios.post(url,`username=${this.user.username}&password=${this.user.password}`).then(resp=>{
							if(resp &&resp.data.result == 'ok'){
								
								this.$setSessionStorage("user",resp.data.data)
								this.$router.push("/mainpage")
							}
							if(this.value){
								this.$setLocalStorage("username",this.user.username);
								
							}else{
								this.$removeLocalStorage("username")
							}
							
						})
						
					}
				})
				
			}
		},
	
		created() {
			
				  let username=this.$getLocalStorage("username")
				  console.log(username);
				if(username){
				this.user.username = username;
				//this.$set(this.user.username,username)
				 	this.value=true;

				 }
				let that = this;
				document.onkeypress = function(e) {
				  var keycode = document.all ? event.keyCode : e.which;
				  if (keycode == 13) {
				    that.login();// 登录方法名
				     return false;
				  }
				};
			
		  }
		 
		
	}
</script>

<style scoped="scoped">
	#poster {
	  background:url("../assets/e154002750821088-8cef3c64f6137dbe-86adca5e2019df45b4b8a8f563f8042f.jpg") no-repeat;
	  background-position: center;
	  height: 100%;
	  width: 100%;
	  background-size: cover;
	  position: fixed;
	}
	.body{
	  margin: 0px;
	  padding: 0;
	}
	.login-container{
		width: 350px;
		margin:0px auto 10px auto;
		
		padding:40px 40px 15px 40px;
		border-radius: 15px;
	
		
	}
	.el-input{
		width: 250px;
	}
	.login-title{
		text-align: center;
		color: goldenrod;
		margin-top: 150px;
		font-size: 50px;
	}
	.login-tit{
		text-align: center;
		color: goldenrod;
		font-size: 50px;
		margin-top: 30px;
	}
	.login-remember{
		margin: 0px 0px 35px 0px;
	}
	.switch{
		margin: 0px 0px 10px 200px;
	}
	
	.span{
		font-size: 20px;
		color: #FFFFFF;
	}

</style>
